<script>
import { ref, reactive, provide, inject } from 'vue'
import {dialogInjectionKey, ElMessage} from "element-plus";
import request from "@/utils/request";
import { useRouter } from 'vue-router';

export default {
  name:"Login",
  setup(){
    const form = reactive({
      custAccount: '',
      custPwd: ''
    })
    const router = useRouter();
    const dialogVisible = ref(false)
    const loginForm = ref(null)

    const rules = reactive({
      custAccount: [{required: true, message: '账号不可为空', trigger: 'blur'}],
      custPwd: [{required: true, message: '密码不可为空', trigger: 'blur'}]
    })

    const handleClose = () => {
      console.log("Handle Close，空函数")
    }

    const onSubmit = () => {
      loginForm.value.validate((valid)=>{
        if(valid){
          request.post("/user/login",{
            custAccount: form.custAccount,
            custPwd: form.custPwd
          })
              .then(response =>{
                console.log(response)
                if(response.data.code === 20000){
                  window.localStorage.setItem("token",JSON.stringify(response.data.data.token))
                  window.localStorage.setItem("custAccount",JSON.stringify(response.data.data.custAccount))
                  window.localStorage.setItem("custId",JSON.stringify(response.data.data.custId))
                  window.localStorage.setItem("avatar",JSON.stringify(response.data.data.custImg))
                  router.push({
                    path:"/index",
                    query:{username:response.data.data.custName}
                  });
                  console.log(response.data);
                  ElMessage.success("登录成功");
                }else{
                  console.log(response.data);
                  ElMessage.error("用户名或密码错误")
                }
              })
        }else{
          dialogVisible.value = true;
          return false;
        }
      })
    }

    return{
      form,
      rules,
      dialogVisible,
      loginForm,
      handleClose,
      onSubmit
    }
  }
}
</script>

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label width=" 80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="custAccount">
        <el-input type="text" placeholder=" 请输入账号" v-model="form.custAccount"/>
      </el-form-item>
      <el-form-item label="密码" prop="custPwd" >
        <el-input type="password"  placeholder=" 请输入密码" v-model=" form.custPwd" show-password/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
        <el-button type="primary" v-on:click="$router.push('/register')">注册</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        title="温馨提示"
        v-model:visible="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<style scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 50px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>